<template>
	<cu-custom />
	<view class="register-box">
		<view class="image-content d-flex flex-row pt-2 pb-2 bgcolor a-center j-center">
			<view class="shop-title mr-5">账户充值</view>
			<image :src="`${getApp.globalData.baseImgUrl}/image/12@2x.png`" style="width: 240rpx; height: 240rpx;" mode=""></image>
		</view>
		<view class="register-form">
			<view class="form-box">
				<view class="uni-form-item uni-column">
					<input class="uni-input border-bottom" type="number" placeholder="请输入金额" v-model="phoneNumber" />
				</view>
				<button @click="submit" class="main-bg-color text-white mt-5 font-md">充值</button>
			</view>
		</view>
	</view>
</template>

<script>
	import cuCustom from '@/components/common/custom.vue'
	export default {
		components: {
			cuCustom
		},
		data() {
			return {
				phoneNumber: null,
				passWord: null,
				getApp:""
			}
		},
		created() {
			this.getApp = getApp()
		},
		methods: {
			submit() {


			}
		}
	}
</script>

<style lang="scss" scoped>
	.register-box {
		background: #fff;
		position: relative;

		.bgcolor {
			background: linear-gradient(0deg, rgba(235, 236, 237, .3), #F4E3E2);
		}

		.shop-title {
			width: 227rpx;
			height: 70rpx;
			font-weight: bold;
			font-size: 56rpx;
			color: #3B3655;
			line-height: 70rpx;
			background: linear-gradient(91deg, #B92521 26.7333984375%, #FD6801 94.7509765625%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}

		.register-form {
			width: 100%;
			position: absolute;
			top: 350rpx;
			padding: 0 45rpx;
			box-sizing: border-box;

			.form-box {
				background: rgba(255, 255, 255, .3);
				border-radius: 16rpx;
				padding: 40rpx 30rpx;
				box-sizing: border-box;

				::v-deep .uni-input {
					height: 55rpx;
					border-radius: 10rpx;
					border: 1px solid #DCDCDC;
				}
			}
		}
	}
</style>